<!DOCTYPE html>
<!-- prettier-ignore -->
<html class="insetting">
	<head>
		<meta charset="UTF-8" />
		<title>Clippy — CSS clip-path maker</title>
		<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:300,300i,400,400i" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="style.min.css" />
		<link rel="shortcut icon" href="pics/favicon.png" />
		<link rel="apple-touch-icon" sizes="120x120" href="pics/apple-touch-icon-120x120.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="pics/apple-touch-icon-152x152.png" />
		<link rel="icon" sizes="196x196" href="homescreen-196x196.png" />
		<meta name="viewport" content="width=device-width" />
	</head>
	<body>
		<div class="main">
			<header class="fade-content">
				<a href="http://bennettfeely.com/clippy">CSS clip-path maker</a>

				<!-- SPONSORSHIP -->

				<!-- <a href="https://getcssscan.com/?ref=clippy" class="sponsorship">
					Sponsored by <span>CSS Scan</span>
				</a> -->

				<a href="https://twitter.com/share" class="twitter-share-button" data-via="bennettfeely">Tweet</a>
				<script>!function(t,e,r){var n,s=t.getElementsByTagName(e)[0],i=/^http:/.test(t.location)?"http":"https";t.getElementById(r)||((n=t.createElement(e)).id=r,n.src=i+"://platform.twitter.com/widgets.js",s.parentNode.insertBefore(n,s))}(document,"script","twitter-wjs");</script>
			</header>
			<div class="demo-container fade-content">
				<section class="demo">
					<div id="box" class="box">
						<div class="shadowboard"></div>
						<div class="clipboard"></div>
						<div class="handles"></div>
					</div>
					<div class="custom-notice">
						<div>
							<span class="touchy"></span> to add points<br>to
							custom polygon.
						</div>
					</div>
				</section>
			</div>
			<section class="dark-panel custom">
				<h2>Custom shape</h2>
				<button class="finish"></button>
			</section>
			<section class="dark-panel inset">
				<div class="flex">
					<h2>Round edges</h2>
					<input value="5% 20% 0 10%" class="inset-round" type="text" />
				</div>
				<p>
					The <code>inset()</code> shape optionally allows values
					similar to <code>border-radius</code> for rounded edges.
					This new feature may be buggy in
					<span class="your-browser">your browser</span>.
				</p>
			</section>
			<section id="flickity" class="shapes horizontal gallery">
				<ul></ul>
			</section>
			<section class="clip-path" tabindex="-1">
				<div class="css-code code fade-content">
					<!--
					<code class="webkit block"
						>-webkit-clip-path:
						<span class="functions"></span>;</code
					>
					-->
					<code class="unprefixed block show">clip-path: <span class="functions"></span>;</code>
				</div>
				<!-- <button class="edit-in-codepen code"></button> -->
			</section>
		</div>
		<div class="side">
			<section class="grid panel ad-box">
				<div class="beg">
					<div>This ad keeps this site running.</div>
					<div>Consider whitelisting this page.</div>
					<div>Thank you for visiting either way!</div>
				</div>
				<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIL27N&placement=bennettfeelycom" id="_carbonads_js"></script>
			</section>
			<section class="dark-panel inset">
				<div class="flex">
					<h2>Round edges</h2>
					<input value="5% 20% 0 10%" class="inset-round" type="text" />
				</div>
				<p>
					The <code>inset()</code> shape optionally allows values
					similar to <code>border-radius</code> for rounded edges.
					This new feature may be buggy in
					<span class="your-browser">your browser</span>.
				</p>
			</section>
			<section class="dark-panel custom">
				<h2>Custom shape</h2>
				<button class="finish"></button>
			</section>
			<section class="shapes vertical" tabindex="-1">
				<ul></ul>
			</section>
			<section class="options">
				<!--
				<div class="grid panel flex fade-content">
					<h2>Prefix</h2>
					<input
						name="prefix"
						value="5"
						type="checkbox"
						id="webkit"
						checked=""
					/>
					<label for="webkit">webkit</label>
				</div>
				-->
				<div class="grid panel flex fade-content">
					<h2>Demo Size</h2>
					<input id="demo_width" value="280" type="number" />
					<h2>&times;</h2>
					<input id="demo_height" value="280" type="number" />
				</div>
				<div class="grid panel fade-content">
					<h2>Demo Background</h2>
					<div class="backgrounds">
						<img src="pics/pittsburgh.jpg" />
						<img src="pics/fierenze.jpg" />
						<img src="pics/sparkler.jpg" />
						<img src="pics/miami.jpg" />
					</div>
					<input placeholder="Custom URL..." id="custom_url" type="url" name="background" />
					<style id="custom_background"></style>
					<div class="flex shadowboard-toggle">
						<h2>Show outside clip-path</h2>
						<input name="prefix" type="checkbox" id="shadowboard-toggle" />
						<label class="joined" for="shadowboard-toggle"></label>
					</div>
				</div>
				<div class="grid panel fade-content">
					<h2>About Clip Paths</h2>
					<p>The <code>clip-path</code> property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.</p>
					<p>CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.</p>
				</div>
				<div class="grid panel fade-content">
					<h2>Browser Support</h2>
					<p>Check out the current browser support for the <code>clip-path</code> property on <a href="http://caniuse.com/#search=clip-path">Can I Use</a>.</p>
				</div>

				<!-- SPONSORSHIP -->

				<!-- <div class="grid panel fade-content">
					<h2>CSS Scan</h2>
					<p>Clippy is sponsored by <a href="https://getcssscan.com/?ref=clippy">CSS Scan</a>, an awesome browser extension for checking, copying and editing CSS.</p>
					<a href="https://getcssscan.com/?ref=clippy" class="sponsorship sponsorship-side">
						Check out CSS Scan now
					</a>
				</div> -->

				<!--
				<a href="http://caniuse.com/#search=clip-path" class="grid panel browser-support permanent fade-content">
					<h2 class="block">
						Browser Support <small>caniuse.com</small>
					</h2>
					<div class="table">
						<span class="icon chrome" data-version="24+"></span>
						<span class="icon safari" data-version="8+"></span>
						<span class="icon opera" data-version="15+"></span>
						<span class="icon ie unsupported" data-version=""></span>
						<span class="icon firefox" data-version="54+"></span>
					</div>
				</a>
				-->
				<div class="grid panel cite fade-content">
					<h2 class="block">Brought to you by Bennett Feely</h2>
					<div class="twitter">
						<a href="https://twitter.com/bennettfeely" class="twitter-follow-button" data-show-count="true">Follow @bennettfeely</a>
					</div>
					<p>Find this project on <a href="https://github.com/bennettfeely/Clippy">Github</a>.</p>
					<p>Want a list of the name of every polygon? Check out my new site, <a href="https://copypastelist.com/math/list-of-polygons/">Copy Paste List</a>.</p>
				</div>
			</section>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="draggabilly.min.js"></script>
		<script src="dev/flickity.pkgd.min.js"></script>
		<script src="dev/clip.js"></script>
		<script src="clip.min.js"></script>
	</body>
</html>
